<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>树洞网登录</title>


    <link rel="stylesheet" href="css/login.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/token.js" type="module"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>

<body>
<div class="content" id="app">
    <div class="form sign-in">
        <h2>欢迎来到树洞网</h2>
        <label>
            <span>邮箱/手机号</span>
            <input type="text" v-model.trim="userTelPhoneOrEmail" required/>
        </label>
        <label>
            <span>密码</span>
            <input type="password" v-model.trim="userPassword" required/>
        </label>
        <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
        <button type="button" class="submit" @click="login">登 录</button>
        <button type="button" class="fb-btn" @click="faceLogin">使用 <span>人脸</span> 登录</button>
    </div>
    <div class="sub-cont">
        <div class="img">
            <div class="img__text m--up">
                <h2>还未注册？</h2>
                <p>立即注册，发现大量机会！</p>
            </div>
            <div class="img__text m--in">
                <h2>已有帐号？</h2>
                <p>有帐号就登录吧，好久不见了！</p>
            </div>
            <div class="img__btn" @click="switchBtn">
                <span class="m--up">注 册</span>
                <span class="m--in">登 录</span>
            </div>
        </div>
        <div class="form sign-up">
            <h2>立即注册</h2>
            <label>
                <span>手机号</span>
                <input type="text" v-model.trim="userTelephoneNumber" @blur="checkTel" required/>
            </label>
            <label>
                <span>密码(>=6位)</span>
                <input type="password" v-model.trim="new_userPassword" @blur="checkPassword(1)" required/>
            </label>
            <label>
                <span>重复密码</span>
                <input type="password" v-model.trim="re_userPassword" @blur="checkPassword(2)" required/>
            </label>
            <label>
                <span>验证码</span>
                <input type="text" v-model.trim="valCode" required/>
                <el-button type="primary" round :disabled="isDisabled" @click="sendSms">{{smsword}}</el-button>
            </label>
            <button type="button" class="submit" @click="register" :disabled="isDisabled2">注 册</button>

        </div>
    </div>
    <div id="faceLogin">
        <el-drawer
                @close="closeFaceLogin"
                :show-close="false"
                size="95%"
                custom-class="faceLogin"
                title="人脸识别登录"
                :visible.sync="drawer"
                direction="ttb"
                :destroy-on-close="true">
            <canvas id="canvas" ref="canvas" width="400" height="300" hidden></canvas>
            <video id="video" ref="video" autoplay width="400" height="300"></video>
        </el-drawer>
    </div>
</div>

<div style="text-align:center;">
</div>
</body>
<script src="js/login.js" type="module"></script>
</html>